<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.container{
				height: 40px;
				margin: 0 auto;
				background-color: darkslateblue;
			}
			@media screen and (max-width:768px) { //超小屏幕
				.container{
					width: 100%;
				}
			}
			@media screen and (min-width:768px) and (max-width:992px)  { 
				.container{
					width: 750px;
				}
			}
			@media screen and (min-width:992px)  and (max-width:1200px) { 
				.container{
					width: 970px;
				}
			}
			@media screen and (min-width:1200px) { 
				.container{
					width: 1170px;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">11</div>
		<script type="text/javascript">
			
		</script>
	</body>
</html>
